


Skin for making messages in the style of "Nameless: The One Thing You Must Recall"

by sqbr



Category: Nameless: The one thing you must recall
Genre: Fanwork Research & Reference Guides, Gen, Nonfiction, ao3 skin
Language: English
Status: Completed
Published: 2019-10-11
Updated: 2019-10-11
Packaged: 2020-12-07 13:47:03
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 320
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/20976893
Author URL: https://archiveofourown.org/users/sqbr/pseuds/sqbr
Summary: This isn't entirely accurate to the game, but has a bunch of pretty pinks and mauves which is good enough for me.





	Skin for making messages in the style of "Nameless: The One Thing You Must Recall"

**Author's Note:**

  * Inspired by [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845) by [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 

  
(AM 10:45)  
Look at this skin for creating Nameless style messages!  
  
(AM 10:46)  
Wow!  
  


I just took the code from [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845/chapters/14729722) and tweaked it until it looked about right. The most complex change is to the "after" code, if you google "css triangle" there's a bunch of guides to making these kinds of shapes.

The actual in-game messages have an icon for the person being messaged, I couldn't be bothered implementing that but if you want to, [this tutorial for Android style messages](https://archiveofourown.org/works/8631214) could be useful.

Code:

This is refusing to work for some reason, but the code looks much the same as in the [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845/chapters/14729722) tutorial, except messages are labelled "me" or "you".
    
    
      
    
    
    
    
    
      
    
    (AM 10:45)  
    
    Look at this skin for creating Nameless style messages!  
    
      
    
    (AM 10:46)  
    
    Wow!  
    
      
    
    
    
    
    
    
    
    

CSS:
    
    
    #workskin .phone {
      max-width: 300px;
      font-family: Tahoma, Geneva, sans-serif;
      display: table;
      margin: auto;
      text-align: center;
    }
    
    #workskin .messagebody {
      width: 300px;
      background-image: linear-gradient(#2F272C, #564347);
      display: table;
      border-radius: 1em;
      padding-left: 1.5em;
      padding-right: 1.5em;
      padding-bottom: 1em;
      border: 5px solid #B15D73;
    }
    
    #workskin .you {
      float: left;
      color: #20191C;
      margin: 0 0 1em;
      border-radius: 0.5em;
      padding: 1.5em 0.5em;
      background: #EADEE2;
      width: 92%;
      clear: both;
      position: relative;
    }
    
    #workskin .you::after {
      content: "";
      position: absolute;
      left: -1.5em;
      top: 1em;
      width: 0.5em;
      height: 0em;
      border-right: 1.5em solid #EADEE2;
      border-top: 0.5em solid transparent;
      border-bottom: 0.5em solid transparent;
    }
    
    #workskin .me {
      float: right;
      color: #20191C;
      margin: 0 0 1em;
      border-radius: 0.5em;
      padding: 1.5em 0.5em;
      background: #D9A9B9;
      width: 92%;
      clear: both;
      position: relative;
    }
    
    #workskin .me::after {
      content: "";
      position: absolute;
      right: -1.5em;
      top: 1em;
      width: 0.5em;
      height: 0em;
      border-left: 1.5em solid #D9A9B9;
      border-top: 0.5em solid transparent;
      border-bottom: 0.5em solid transparent;
    }
    
    #workskin .time {
      min-width: 295px;
      color: #C2B113;
      font-size: .75em;
      padding-bottom: .5em;
      padding-top: 0;
      margin-left: .5em;
      margin-bottom: -2.5em;
      text-align: center;
      display: table;
    }

**Author's Note:**

> I have such a craving for Neapolitan ice-cream right now.


End file.
